import { Layout, Breadcrumb, Dropdown, Menu, Avatar } from "antd"
import { getRouteTilte } from "@/utils";
import { useLocation } from "react-router-dom";
import { useEffect, useState, useMemo } from "react";
import { Link } from "react-router-dom";
import { HomeOutlined, LogoutOutlined } from '@ant-design/icons';
import { postLogoutAsync, useAuthState } from "@/store/modules/auth";
import { useAppDispatch } from "@/store";
import "./index.less";
const { Header } = Layout;

export default function IndexHeader() {
    // 通过useAuthState获取管理员模块中的信息
    const { adminName, avatar } = useAuthState();//  useSelector(authSelector);
    const location = useLocation();
    const dispatch = useAppDispatch();

    // 记忆菜单组件
    const menu = useMemo(() => (
        <Menu
            items={[
                {
                    key: '1',
                    icon: <HomeOutlined />,
                    label: (
                        <Link to="/">返回首页</Link>
                    ),
                },
                {
                    key: '2',
                    icon: <LogoutOutlined />,
                    label: (
                        <a onClick={e => {
                            e.preventDefault();
                            dispatch(postLogoutAsync());
                        }}>退出登陆</a>
                    ),
                }
            ]}
        />
    ), []);

    // 将获得的标题作为初始值
    // /hospital/show/622574cc36a9ba1be763dad8
    const [routeTitle, setRouteTitle] = useState(getRouteTilte(location.pathname));
    useEffect(() => {
        setRouteTitle(getRouteTilte(location.pathname));
    }, [location.pathname])
    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>{routeTitle.title}</Breadcrumb.Item>
                <Breadcrumb.Item>{routeTitle.subTitle}</Breadcrumb.Item>
            </Breadcrumb>
            <div>
                <span>欢迎回来{adminName}！</span>
                <Dropdown overlay={menu}>
                    <Avatar src={avatar} />
                </Dropdown>
            </div>
        </Header>
    )
}